<template>
	<view>
		<!-- 暂无数据 / 加载更多 -->
		<view class="nodata" v-if="xxxList.length == 0">
			<image  v-if="type==1" class="nodata_img" src="../static/image/noData.png" mode="aspectFill"></image>
			<image  v-if="type==2"  class="nodata_img"  src="../static/image/nodatas.png" mode="aspectFill"></image>
			<text class="nodata_tit">暂无相关数据</text>
			
			<!-- uview官方备用图片地址链接 -->
			<!-- <u-empty mode="data"  icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty> -->
		</view>
		<!-- 加载中 -->
		<view v-if="showMore">
			<view class="loadmores" v-if="xxxList.length != 0">
				<u-loadmore :status="status" line dashed fontSize="12" marginTop="10" lineColor="#a8a6a3" />
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "nodata",
		// 基础写法
		// props: ["xxxList", "status"], 
		
		// 进阶写法
		props: {
			xxxList: {
				type: Array,
				default: []
			},
			status: {
				type: String,
				default: 'loadmore'
			},
			showMore: {
				type: Boolean,
				default: true
			},
			type:{
				type:Number,
				default:1
			}
		},
		data() {
			return {};
		},
		created() {
			// console.log(this.xxxList)
		}
	}
</script>

<style scoped>
	/* 暂无数据 */
	.nodata {
		width: 100%;
		/* height: 800rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 80rpx auto;
		/* background: #ffffff; */
		border-radius: 0 0 16rpx 16rpx;
	}

	.nodata_img {
		width: 290rpx;
		height: 240rpx;
	}

	.nodata_tit {
		font-size: 28rpx;
		color: #666666;
		margin-top: 30rpx;
	}
	.loadmores{
		padding-bottom: 10rpx;
	}
</style>